import React, { Component } from 'react';
import { WingBlank, WhiteSpace, Toast } from 'antd-mobile'
import { InputItem, Button} from 'antd-mobile';
import { connect } from 'react-redux'

import { loginTrue,loginFalse } from '../../store/actions/user'
import { login }from '../../services'
import logo from '../../assets/img/logo.jpg'
import './login.less'

@connect(null,{ loginTrue,loginFalse })//通过connect方法使用的lognTrue属于一个异步方法，会自动帮我们dispatch
class Login extends Component {
    constructor(){
        super();
        this.state={
            username:'',
            password:''
            // this.props.state.username,
            // this.props.state.password
        };
        console.log(this.props)
    }
    onUsernameChange = (username) => {
        this.setState({
            username
        });

    };
    onPasswordChange = (password) => {
        this.setState({
            password
        })
    };

    onLogin=()=>{
        if(this.state.username===''||this.state.password===''){
            return Toast.fail('用户名或密码不能为空',2);
        }
        const {
            username,
            password
        }=this.state;
        login({
            username,
            password
        }).then(resp=>{
            //登录成功后跳转的链接地址
            // let to='/home';
            // if(this.props.location.state!=undefined){
            //     to=this.props.location.state.from;
            // }
            const { from='/home' }=this.props.location.state||{ };
            //处理成功后在本地存储后台返回的token
            window.localStorage.setItem('cors-token',resp.data.data.token);
            //成功登录后将isLogin的状态修改为true
            this.props.loginTrue();
            //登录成功后进行跳转
            // this.props.history.push(to);
            this.props.history.push(from);
        }).catch(err=>{
            Toast.fail('用户名或密码错误，请重新输入');
            window.localStorage.removeItem('cors-token');
            this.props.loginFalse();
        })
    };
    toRegister=()=>{
       this.props.history.push('/register')
    };
    render() {
        return (
            <WingBlank>
                <WhiteSpace />
                <div className="pro-logo">
                    <img src={logo} alt="yue"/>
                </div>
                <WhiteSpace />
                <InputItem
                    type="text"
                    placeholder="请输入用户名"
                    onChange={this.onUsernameChange}
                    value={this.state.username}
                >用户名</InputItem>
                <InputItem
                    type="password"
                    placeholder="请输入密码"
                    onChange={this.onPasswordChange}
                    value={this.state.password}
                >密码</InputItem>
                <WhiteSpace />
                <div className="toRegister">
                    <div className="nextNoLogin">
                        <input type="checkbox" />
                        下次免登录
                    </div>
                    <span className="register" onClick={this.toRegister.bind(this)}>立即注册</span>
                </div>
                <WhiteSpace />
                <Button
                    type="primary"
                    onClick={this.onLogin}
                >登录</Button>
            </WingBlank>


        );
    }
}

export default Login;